<!-- 车辆管理 -->
<template>
  <div class="dashboard-container driver customer-list-box">
    <!-- 顶部搜索 -->
    <el-card>
      <el-form
        :inline="true"
        :model="selectForm"
        class="demo-form-inline"
      >
        <el-form-item label="司机账号:">
          <el-input
            v-model="selectForm.account"
            placeholder="司机姓名"
            style="width: 300px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="司机姓名:">
          <el-input
            v-model="selectForm.name"
            placeholder="司机姓名"
            style="width: 300px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="司机手机号:">
          <el-input
            v-model="selectForm.phone"
            placeholder="司机手机号"
            style="width: 300px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属机构：">
          <el-select
            v-model="selectForm.agentId"
            placeholder="所属机构"
            style="width: 300px;"
          >
            <el-option
              v-for="(item, index) in workArr"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="danger"
            @click="handleSelect"
          >搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 列表渲染 -->
    <el-card style="margin-bottom:55px">
      <el-table
        :data="driverList"
        stripe
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="65"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="account"
          label="司机账号"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="司机姓名"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="司机电话"
          width="170"
        >
        </el-table-column>
        <el-table-column
          prop="truck.licensePlate"
          label="关联车辆"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="agency.name"
          label="所属机构"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="workStatus"
          label="工作状态"
          :formatter="formateWork"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="180"
        >
          <template #default="{ row }">
            <el-button
              type="text"
              @click="getDetail(row.userId)"
            >查看</el-button>
            <div style="display: inline-block;vertical-align: middle;color:#E3E3E3">|</div>
            <el-button
              type="text"
              @click="setTrunk(row.userId)"
            >配置车辆</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          :current-page="page"
          :page-sizes="[8, 10, 13, 15]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 配置车辆 -->
    <el-dialog
      title="配置车辆"
      :visible.sync="dialogVisible2"
      width="25%"
    >
      <span>
        <div>
          <p style="text-align: left;color: #20232A;">车辆启用需满足以下条件：</p>
          <p style="text-align: left;color: #20232A;">1.车辆信息已完善 &nbsp; &nbsp; 2.车辆信息已完善</p>
          <p style="text-align: left;color: #20232A;">3.司机绑定车辆未在启用状态</p>
        </div>
      </span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button
          type="danger"
          @click="toSet"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 确认配置 -->
    <el-dialog
      title="司机配置"
      :visible.sync="dialogVisible3"
      width="30%"
    >
      <span>
        <div>
          <div
            class="msg"
            style="background-color: #F3F4F7 ;"
          >
            <ul class="ul">
              <li class="lis">
                <div>司机编号 <span>{{ confirmForm.account }}</span></div>
                <div>司机名称 <span>{{ confirmForm.name }}</span></div>
              </li>
              <li class="lis">
                <div>司机电话 <span>{{ confirmForm.mobile }}</span></div>
                <div>所属机构 <span>{{ confirmForm.agency }}</span></div>
              </li>
            </ul>
          </div>
          <div style="display:flex;margin-bottom:20px">
            <div style="width: 100px;line-height:40px">配置车辆</div>
            <el-select
              v-model="value1"
              placeholder="请选择"
            >
              <el-option
                v-for="item in car"
                :key="item.id"
                :label="item.licensePlate"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-table
              fit
              :data="list"
              stripe
              style="width: 100%"
            >
              <el-table-column
                type="index"
                label="序号"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="licensePlate"
                label="车牌号"
              >
              </el-table-column>
              <el-table-column
                prop="workStatus"
                label="车辆状态"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
              >
                <template #default>
                  <div>
                    <el-button type="text">编辑</el-button>
                    <el-button type="text">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <div style="text-align: center;">
          <el-button @click="dialogVisible3 = false">取 消</el-button>
          <el-button
            type="danger"
            @click="confirmSet"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getTrunkDetailAPI } from '@/api/vehicle'
import { driverList } from '@/api/transit'
import { agencyList } from '@/api/institutions'
import { driverDetailAPI, unWorkingTrucksAPI, driverTrunkAPI } from '@/api/driver'
export default {
  name: 'Courses',
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      driverList: [],
      selectForm: {},
      workArr: [],
      dialogVisible2: false,
      dialogVisible3: false,
      driveId: '',
      confirmForm: {}, // 用来存放最后一个弹窗的数据
      value1: '', // 配置司机的下拉框c
      car: {}, // 所有车辆
      list: []
    }
  },
  watch: {
    value1: {
      deep: true,
      async handler(newValue) {
        console.log(newValue)
        this.list = []
        const res = await getTrunkDetailAPI(newValue)
        console.log(res)
        if (res.data.workStatus === 0) res.data.workStatus = '停用'
        if (res.data.workStatus === 1) res.data.workStatus = '启用'
        this.list.push(res.data)
      }
    }
  },
  mounted() {
    this.getDriverPage()
  },
  methods: {
    // 确认配置
    async confirmSet() {
      const res = await driverTrunkAPI(
        {
          driverIds: [
            this.confirmForm.userId
          ],
          truckId: this.value1
        }
      )
      console.log(res)
      if (res.code === 1) {
        this.$message.error(res.msg)
      }
      this.dialogVisible3 = false
    },
    async toSet() {
      // TODO 这里将来用来检验是否满足三个条件,如果满足则放行
      // TODO 放行后请求司机的数据 用来回填最后一个确认表单
      const res = await driverDetailAPI(this.driveId)
      console.log(res)
      this.confirmForm = res.data
      this.confirmForm.agency = this.confirmForm.agency.name
      this.dialogVisible2 = false
      this.dialogVisible3 = true
    },
    // 点开配置车辆弹框
    async setTrunk(id) {
      this.driveId = id
      console.log(this.driveId)
      this.dialogVisible2 = true
      // 获取车辆列表
      const res = await unWorkingTrucksAPI()
      console.log(res)
      this.car = res.data.items
    },
    // 格式化状态
    formateWork(row) {
      const MAP = {
        0: '休息',
        1: '上班'
      }
      return MAP[row.workStatus]
    },
    // 打开查看详情弹框
    getDetail(id) {
      console.log(id)
      this.$router.push({
        path: 'driver-detail',
        query: {
          id
        }
      })
    },
    // 获取司机分页数据
    async getDriverPage() {
      const res = await driverList({ page: this.page, pageSize: this.pageSize, ...this.selectForm })
      this.driverList = res.data.items
      this.total = Number(res.data.counts)
      const res1 = await agencyList()
      const data = JSON.parse(res1.data)
      this.workArr = data
    },
    // 搜索
    handleSelect() {
      this.page = 1
      this.pageSize = 10
      this.getDriverPage()
    },
    // 重置
    handleReset() {
      this.page = 1
      this.pageSize = 10
      this.selectForm = {
      }
      this.getDriverPage()
    },
    // pageSize变化时触发
    handleSizeChange(current) {
      console.log(this.pageSize, current)
      this.pageSize = current
      this.getDriverPage()
    },
    // currentPage 改变时会触发
    handleCurrentChange(current) {
      console.log(this.page, current)
      this.page = current
      this.getDriverPage()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.ul {
  padding: 0;
}

.lis {
  display: flex;
  justify-content: space-around;

  div {
    width: 40%;
    margin: 10px 0;
    text-align: left;
    color: #20232A;

    span {
      margin-left: 20px;
      color: #818693;
    }
  }
}

li {
  list-style: none;
}
::v-deep .el-card {
  margin: 15px 20px;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
// 下拉框
::v-deep .el-select {
  width: 100%;
}

::v-deep .el-card{
  overflow: initial;
}
</style>

